<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
>
<head>
  <title>监控指令列表</title>
</head>
<body>
<div
  layout:fragment="content"
  class="container"
>
  <div id="app" v-cloak>
    <div class="container">
      <div class="myHeader">
        <div class="myHeader-title">
          修改本地过滤指令
        </div>
      </div>
      <table
        width="100%"
        border="0"
        class="el-table el-table--border"
        cellspacing="0"
        cellpadding="0"
      >
        <tbody>
        <tr>
          <td width="120">指令生效的经营者<span style="color:red">*</span></td>
          <td>
            <el-select v-model="formData.idcId" @change="idcIdChange" v-validate="'required'" name="idcId">
              <el-option v-for="oper in opers" :value="oper.idcId" :label="oper.operName"></el-option>
            </el-select>
            <div
              id="idcId_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('idcId')">请选择指令生效的经营者</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>指令生效的机房名称<span style="color:red">*</span></td>
          <td>
            <el-select v-model="houseIdList" @change="changeHouseId" v-validate="'required'" name="houseId" multiple
                       placeholder="请选择指令生效的机房名称">
              <el-option
                v-for="house in houses"
                :key="house.id"
                :label="house.houseName"
                :value="house.id">
              </el-option>
            </el-select>
            <span class="field-error msg" v-show="errors.has('houseId')">请选择指令生效的机房名称</span>
          </td>
        </tr>
        <tr>
          <td>过滤原因<span style="color:red">*</span></td>
          <td>
            <el-input
              v-validate="'required|max:128'"
              name="reason"
              v-model="formData.reason"
              maxlength="128"
              show-word-limit
            ></el-input>
            <div
              id="reason_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('reason:required')">请填写过滤原因</span>
              <span class="field-error" v-show="errors.has('reason:max')">过滤原因长度最大为 128 位</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>日志记录<span style="color:red">*</span></td>
          <td>
            <el-radio-group v-model="formData.log">
              <el-radio label="0">不记录</el-radio>
              <el-radio label="1">记录</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>日志上传<span style="color:red">*</span></td>
          <td>
            <el-radio-group v-model="formData.report">
              <el-radio label="0">不上传</el-radio>
              <el-radio label="1">上传</el-radio>
            </el-radio-group>
          </td>
        </tr>
        <tr>
          <td>生效时间<span style="color:red">*</span></td>
          <td>
            <el-date-picker
              v-model="formData.effectTime"
              name="effectTime"
              v-validate="'required'"
              type="datetime"
              placeholder="请选择生效时间">
            </el-date-picker>
            <div
              id="effectTime_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('effectTime')">请选择生效时间</span>
            </div>
          </td>
        </tr>
        <tr>
          <td>过期时间<span style="color:red">*</span></td>
          <td>
            <el-date-picker
              v-model="formData.expiredTime"
              name="expiredTime"
              v-validate="'required'"
              type="datetime"
              placeholder="请选择过期时间">
            </el-date-picker>
            <div
              id="expiredTime_message"
              class="msg"
            >
              <span class="field-error" v-show="errors.has('expiredTime')">请选择过期时间</span>
            </div>
          </td>
        </tr>
        <tr id="natip">
          <td>指令规则<span style="color: red">*</span>
            <el-button type="primary" size="mini" @click="addInsRule">新增</el-button>
          </td>
          <td>
            <table border="0" width="100%" class="el-table el-table--border">
              <tbody>
              <tr>
                <td width="130px">规则类型</td>
                <td>规则起始值</td>
                <td>规则结束值</td>
                <td width="150px">规则匹配范围</td>
                <td width="50px">操作</td>
              </tr>
              <tr v-for="(insFilterRule,index) in formData.insFilterRules">
                <td>
                  <el-select v-model="insFilterRule.subtype"
                             @change="subtypeChange(index)"
                             v-validate="'required'"
                             :name="'subtype'+index"
                             style="width: 100%;"
                  >
                    <el-option :key="1" label="域名" :value="1"></el-option>
                    <el-option :key="2" label="URL" :value="2"></el-option>
                    <el-option :key="3" label="关键字" :value="3"></el-option>
                    <el-option :key="4" label="源IP地址" :value="4"></el-option>
                    <el-option :key="5" label="目的IP地址" :value="5"></el-option>
                    <el-option :key="6" label="源端口" :value="6"></el-option>
                    <el-option :key="7" label="目的端口" :value="7"></el-option>
                    <el-option :key="8" label="传输协议" :value="8"></el-option>
                  </el-select>
                  <span class="field-error msg"
                        v-show="errors.has('subtype'+index)">请选择规则类型</span>
                </td>
                <td>
                  <el-input
                    v-if="parseInt(insFilterRule.subtype)===1"
                    v-validate="'required|max:128|value_start_validate'"
                    v-model="insFilterRule.valueStart"
                    :name="'valueStart'+index"
                    placeholder="必填"
                    maxlength="128"
                    show-word-limit
                  ></el-input>
                  <div v-else-if="parseInt(insFilterRule.subtype)===8">
                    <el-form label-position="top" label-width="80px">
                      <el-form-item label="协议类型:">
                        <el-select
                          v-validate="'required'"
                          v-model="insFilterRule.valueStart"
                          :name="'valueStart'+index"
                          style="width: 100%;"
                        >
                          <el-option :value="1" :key="1" label="TCP"></el-option>
                          <el-option :value="2" :key="2" label="UDP"></el-option>
                        </el-select>
                      </el-form-item>
                    </el-form>
                  </div>

                  <el-input
                    v-else-if="parseInt(insFilterRule.subtype)===2"
                    maxlength="128"
                    v-validate="{required:true,url: {require_protocol: true },max:128}"
                    v-model="insFilterRule.valueStart"
                    :name="'valueStart'+index"
                    show-word-limit
                    placeholder="必填"
                  ></el-input>

                  <el-input
                    v-else-if="parseInt(insFilterRule.subtype)===4||parseInt(insFilterRule.subtype)===5"
                    v-validate="'required|ip'"
                    v-model="insFilterRule.valueStart"
                    :name="'valueStart'+index"
                    placeholder="必填"
                  ></el-input>

                  <el-input
                    v-else-if="parseInt(insFilterRule.subtype)===6||parseInt(insFilterRule.subtype)===7"
                    v-validate="'required|numeric|max_value:65535'"
                    v-model="insFilterRule.valueStart"
                    :name="'valueStart'+index"
                    placeholder="必填"
                  ></el-input>

                  <el-input
                    v-else
                    maxlength="128"
                    show-word-limit
                    v-validate="'required|max:128'"
                    v-model="insFilterRule.valueStart"
                    :name="'valueStart'+index"
                    placeholder="必填"
                  ></el-input>
                  <span class="field-error msg" v-show="errors.has('valueStart'+index)">{{ errors.first('valueStart'+index)}}</span>
                </td>
                <td>
                  <el-input
                    v-if="parseInt(insFilterRule.subtype)===4||parseInt(insFilterRule.subtype)===5"
                    :name="'valueEnd'+index"
                    v-validate="'ip|max:128'"
                    maxlength="128"
                    show-word-limit
                    v-model="insFilterRule.valueEnd"
                    placeholder="IP信息可填写"
                  ></el-input>

                  <span class="field-error msg"
                        v-show="errors.has('valueEnd'+index)">{{errors.first('valueEnd'+index)}}</span>
                </td>
                <td>
                  <el-select
                    v-if="parseInt(insFilterRule.subtype) === 3"
                    v-model="insFilterRule.keywordRangeList"
                    v-validate="'required'"
                    :name="'keywordRange'+index"
                    @change="changeKeywordRange(index)"
                    multiple
                    placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                  <span class="field-error msg"
                        v-show="errors.has('keywordRange'+index)&& parseInt(insFilterRule.subtype)=== 3">请选择关键词规则的匹配范围</span>
                </td>
                <td align="left">
                  <div>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="deleteInsRule(index)"
                    >删除
                    </el-button>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </td>
        </tr>
        </tbody>
      </table>
      <div align="center">
        <el-button
          type="primary"
          @click="submitForm"
        >确认
        </el-button>
        <el-button
          @click="_forward('/command-manage/admin_commandfilter')"
        >返回
        </el-button>
      </div>
    </div>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/component/BaseValidateVue.js"></script>
  <script src="/static/js/module/basic-data/api/baseHouseInfoApi.js"></script>
  <script src="/static/js/module/basic-data/api/baseOperCompanyApi.js"></script>
  <script src="/static/js/module/command-manage/api/insFilterApi.js"></script>
  <script src="/static/js/module/command-manage/modify/admin_commandfilter_modify.js"></script>
</div>
</body>
</html>
